<template>
  <div class="table-footer" v-cloak>
    <div class="table-pageNum">
      当前第<span>{{startRow}}</span>项到第<span>{{endRow}}</span>项，总共<span>{{totalRow}}</span>项
    </div>
    <div class="table-pagination" v-if="totalRow > 0">
      <ul class="pagination">
        <li class="first disabled" v-if="cur == 1"><a class="page-link">首页</a></li>
        <li class="first" v-else><a class="page-link" @click="btnClick(1)">首页</a></li>
        <li class="prev disabled" v-if= "cur == 1"><a class="page-link">前一页</a></li>
        <li class="prev" v-else><a class="page-link" @click="btnClick(cur-1)">前一页</a></li>
        <li class="page" v-for="(item, i) in indexs" :key="i" :class="cur == item ? 'active' : ''"><a class="page-link" @click="btnClick(item)">{{item}}</a></li>
        <li class="next disabled" v-if="cur == total"><a class="page-link">后一页</a></li>
        <li class="next" v-else><a class="page-link" @click="btnClick(cur+1)">后一页</a></li>
        <li class="last disabled" v-if="cur == total"><a class="page-link">尾页</a></li>
        <li class="last" v-else><a class="page-link" @click="btnClick(total)">尾页</a></li>
      </ul>
      <div class="pagination-skip">
        <span>到</span><input type="number" class="form-control" min="1" v-bind:max="total" v-model="skip" @keyup.enter="btnClick(skip)"><span>页</span>
        <!-- <button class="ake_btn ake_btn_blue" @click="btnClick(skip)">Go</button> -->
      </div>
    </div>
    <div class="table-showNum">
      <el-select v-model="pageSize" @change="changePageSize">
        <el-option
          v-for="i in pageSizes" :key="i"
          :label="i + ' '+ '项/页'"
          :value="i">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import common from '../../mixins/common.js'
export default {
  mixins: [common],
  props: {
    curPage: {
      type: Number,
      default: 1
    },
    visiblePage: {
      type: Number,
      default: 5
    },
    pageSizes: {
      type: Array,
      default: function () {
        return [10, 20, 50, 100]
      }
    },
    size: Number
  },
  data() {
    return {
      cur: this.curPage,
      visible: this.visiblePage,
      pageSize: this.pageSizes[0],
      totalRow: this.size,
      skip: 1
    }
  },
  watch: {
    size: function(val) {
      this.totalRow = val;
    },
    curPage: function(val){
      if(this.cur !== val) {
        this.cur = val;
      }
    }
  },
  computed:{
    // paging_template: function () {
    //   let _temp = this.langObj.normal_label_paging_template;
    //   if(_temp) {
    //     let _start = this.startRow;
    //     let _end = this.endRow;
    //     let _total = this.totalRow;
    //     _temp = _temp.replace('#{start}', '<span>'+_start+'</span>');
    //     _temp = _temp.replace('#{end}', '<span>'+_end+'</span>');
    //     _temp = _temp.replace('#{total}', '<span>'+_total+'</span>');
    //   }
    //   return _temp;
    // },
    total: function() {
      let _total = Math.ceil(this.totalRow / this.pageSize);
      return _total;
    },
    startRow: function() {
      let _start = this.pageSize * (this.cur - 1) + 1;
      return this.totalRow > 0 ? _start : 0;
    },
    endRow: function() {
      let _end = this.pageSize * this.cur;
      return this.totalRow > _end ? _end : this.totalRow;
    },
    indexs: function() {
      let left = 1;
      let visible = this.visible;
      let total = this.total;
      let right = total;
      let cur = this.cur;
      let half = Math.ceil(visible / 2);
      let arr = [];
      if(total > visible) {
        if(cur <= half) {
          left = 1;
          right = visible;
        }else if(cur >= total - half + 1) {
          right = total;
          left = total - visible + 1;
        } else {
          left = cur - half + 1;
          right = left + visible - 1;
        }
      } 
      while (left <= right) {
        arr.push(left);
        left ++;
      }
      return arr;
    }
  },
  methods: {
    initFn () {
      this.cur = 1;
      this.skip = 1;
    },
    btnClick(index) {
      if(index !== this.cur) {
        if(index < 1) {
          this.cur = 1;
        } else if(index > this.total) {
          this.cur = this.total;
        } else {
          this.cur = index;
        }
        this.skip = this.cur;
      }
      this.backDataToParent(1);
    },
    changePageSize () {
      this.cur = 1;
      this.skip = 1;
      this.backDataToParent(1);
    },
    backDataToParent (isFresh) {
      this.$emit('backData',this.cur, this.pageSize);
    }
  }
}
</script>

<style lang="less">
@import '../../assets/less/base/variables.less';
@import '../../assets/less/base/pagination.less';
.table-footer {
  /*position: absolute;
  left: 0;
  right: 0;
  bottom: 0;*/
  width: 100%;
  height: @tableFootH;
  padding-left: 15px;
  padding-right: 15px;
  border-top: 1px solid @greydd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  .table-pageNum {
    flex: 1;
    span {
      padding-left: 2px;
      padding-right: 2px;
    }
  }
  .table-showNum {
    flex: 1;
    text-align: right;
    .el-select {
      max-width: 120px;
    }
    .form-control {
      display: inline-block;
      width: auto;
      padding-left: @spacing - 2;
      padding-right: @spacing / 2;
    }
  }
  .table-pagination {
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 0;
    .pagination{
      font-size: 14px;
    }
    .pagination-skip {
      display: inline-block;
      vertical-align: bottom;
      margin-left: @spacing / 2;
      span {
        display: inline-block;
        font-size: 14px;
        padding: 0px @spacing / 2;
      }
      .form-control {
        display: inline-block;
        width: 42px;
        text-align: center;
        padding-left: 2px;
        padding-right: 0px;
      }
      .ake_btn {
        vertical-align: sub;
        padding-left: 4px;
        padding-right: 4px;
        height: 28px;
        line-height: 20px;
      }
    }
  }
}
</style>